<template>
	<view>
	<view class="uni-reture"><uni-tag @click="goBack" text="返回"></uni-tag></view>
		<view class="search-container">
		  <!-- 搜索框 -->
		  <input 
		    type="text" 
		    placeholder="请输入搜索内容" 
		    v-model="searchQuery" 
		    class="search-input"
		  />
		  <!-- 搜索按钮 -->
		  <button 
		    type="primary" 
		    class="search-button" 
		    @click="onSearch"
		  >
		    搜索
		  </button>
		</view>
		
		<view class="filter-drop-down">
		    <view class="filter-item">
			  <lable class="uni-lable">条件1：</lable>
			  <uni-data-select
			     class="uni-select-item"
			      v-model="value"
			      :localdata="range"
			      @change="change"
			      label="应用选择"
			      ></uni-data-select>
		    </view>
		    <view class="filter-item">
			  <lable class="uni-lable">条件2：</lable>
			  <uni-data-select
			     class="uni-select-item"
			      v-model="value"
			      :localdata="range"
			      @change="change"
			      label="应用选择"
			      ></uni-data-select>
		    </view>
		  </view>
		
		<view class="view-List">
			<view  class="view-List-item" v-for="(item, index) in infoData" :key="index">
				<text>{{item.name}}</text>
				<text @click="handel">处理</text>
			</view>
		</view>
		<view class="uni-page-class">
			<view class="pag-left-item">
				<uni-pagination :total="50" title="标题文字" />
			</view>
			<view class="pag-right-item">
				<input class="uni-input" focus placeholder="页码" />
				<view class="tag-item">跳转</view>
			</view>
		</view>
		<!-- <image class="logo" src="/static/logo.png"></image> -->
	    <!-- <view class="layout-form" v-model="FormData">
			<view class="layout-form-item" >
				<view class="form-label">问题: </view>
				<view class="form-type">
					<input  class="uni-input " v-model="FormData.name"/>
				</view>
			</view>
			<view class="layout-form-item" >
				<view class="form-label">检查人: </view>
				<view class="form-type">
					<input  class="uni-input "  v-model="FormData.code" auto-height disabled="true"/>
				</view>
			</view>
			<view class="layout-form-item" >
				<view class="form-label">车间: </view>
				<view class="form-type">
					<input  class="uni-input "  v-model="FormData.code" auto-height disabled="true"/>
				</view>
			</view>
			<view class="layout-form-item" >
				<view class="form-label">检查区域: </view>
				<view class="form-type">
					<input  class="uni-input "  v-model="FormData.code" auto-height/>
				</view>
			</view>
			<view class="layout-form-item" >
				<view class="form-label">检查时间: </view>
				<view class="form-type">
					<view class="example-body">
							<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
					</view>
				</view>
			</view>
			<view class="layout-form-item" >
				<view class="form-label">问题描述: </view>
				<textarea  class="form-type-text" v-model="FormData.pass" auto-height/>
			</view>
			<view class="layout-form-item" >
				<view class="form-label">图片上传: </view>
					<view class="example-body">
						<uni-file-picker class="form-up-file" :file-mediatype="mediaType" ></uni-file-picker>
					</view>
			</view>
			<view class="layout-form-btn" >
				<button class="mini-btn" type="primary" @click="clickInter">提交</button>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
                searchQuery: '', // 用户的搜索输入
				value: '',
                range: [
                    { value: 0, text: "1" },
					{ value: 1, text: "2" },
					{ value: 2, text: "3" },
				],
				current: 3,
				total: 10,
				pageSize: 10,
				FormData: {
					name: '',
					code: '',
					pass: ''
				},
				infoData: [
					{
						name: '第一条问题内容',
					},
					{
						name: '第二条问题内容',
					},{
						name: '第三条问题内容',
					}
				],
				single:  new Date(),
				mediaType: ['image', 'audio']
			}
		},
		onLoad() {

		},
		methods: {
			clickInter(){
				
			},
			//搜索功能
			  onSearch() {
			    // 执行搜索逻辑，比如发送请求到服务器或者过滤本地数据
			    console.log('搜索内容:', this.searchQuery);
			    // 这里可以添加实际的搜索逻辑，比如调用API或者过滤数据列表
			  },
			  goBack() {
				  uni.switchTab({
				  	url: '/pages/position/handel/index' // 跳转页面的路径
				  });
			  },
			  handel() {
				  uni.redirectTo({
				      url: '/pages/position/handel/posHand' // 跳转页面的路径
				  });
			  },
		    change(e) {
				this.single = e
				console.log('change事件:', this.single = e);
						},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			maskClick(e){
				console.log('maskClick事件:', e);
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.uni-reture {
		height: 20px;
		margin-top: 20px;
		margin-left: 10px;
	}
	.uni-list-item text {
		display: block; /* 确保文字是块级显示 */
		color: #000; /* 设置文字颜色，确保与背景色不同 */
	},
.view-List {
	margin-bottom: 10px;
}
	.view-List-item {
		color: #000;
		padding: 10px 0;
		border-bottom: 1px solid lightgray;
		font-size: 14px;
		font-weight: 400;
		display: flex;
		justify-content: space-between;
	}
	.text-area{
		margin-top: 100px;
	}
		.form-type-input {
			text-align: left;
		    line-height: 35px;
			font-size: 12px;
		}
	.uni-input{
		position: relative;
		display: block;
		height: 100%;
		background: none;
		color: inherit;
		opacity: 1;
		font: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		text-align: inherit;
			text-indent: inherit;
		text-transform: inherit;
		text-shadow: inherit;
		text-align: left;
		/* border: 2px; */
		border: 1px solid #999 !important;
		/* margin: 3px; */
	}
	.form-type-text {
		text-align: left;
		border: 1px solid #999 !important;
		line-height: 35px;
		border-radius: 5px;
		color: rgba(0, 0, 0, 0.6);
		/* margin: 3px; */
	}
	.layout-form-btn {
		text-align: center;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
		}
	.text-area {
		display: flex;
		justify-content: center;
	}
	.uni-btn{
		margin-top: 20px;
		text-align: center;
		width: 100%;
	}
	.mini-btn{
		display: inline;
		width: 50%;
	}
	.form-up-file {
		margin-left: 10px;
	}
	.uni-left{
		text-align: center;
		width: 50%;
		display: inline-block;
	}
	.uni-right{
		text-align: center;
		width: 50%;
		display: inline-block;
	}
	.example-body {
		background-color: #fff;
    }
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	//搜索框样式
	.search-container {
	  display: flex;
	  align-items: center;
	  //padding: 16px;
	  padding: 16px 16px 10px 16px;
	}
	
	.search-input {
	  flex: 1;
	  padding: 8px;
	  border: 1px solid #ccc;
	  border-radius: 4px 0 0 4px; /* 左侧圆角 */
	  outline: none;
	}
	
	.search-button {
	  //padding: 8px 16px;
	  margin-left: -1px; /* 去除按钮和输入框之间的间隙 */
	  border: 1px solid #ccc;
	  border-left: none; /* 去除按钮左侧的边框 */
	  font-size: 15px !important;
	  border-radius: 0 4px 4px 0; /* 右侧圆角 */
	  background-color: #007aff; /* 按钮背景色 */
	  color: #fff; /* 按钮文字颜色 */
	}
	//筛选条件
	.filter-drop-down {
	  position: relative;
	  width: 100%;
	  padding-bottom: 10px;
	}
	.filter-item {
		display: inline-block;
		width: 50%;
	}
	.uni-select-item {
		display: inline-block;
		width: 60%;
	}
	.uni-lable {
		font-size: 13px;
		color: black;
	}
	.uni-page-class {
		display: flex;
        align-items: center; /* 垂直居中 */
	}
	.pag-left-item {
		display: inline-block;
		width: 70%;
	}
	.pag-right-item {
		display: flex;
        align-items: center; /* 垂直居中 */
		justify-content: space-between;
		//padding-left: 10px;
		width: 30%;
	}
	.uni-input {
		display: inline-block;
	    padding: 3px 10px;
		width: 30%;
	}
	.tag-item {
		display: inline-block;
		width: 30%;
		background-color: #f0f0f0;
		padding: 5px 10px;
		border-radius: 5px;
	}
</style>
